<template>
  <!-- 受众看板 -->
  <div class="app-container">
    <div class="title">受众看板</div>
    <div class="theme-bg">
      <div class="audience-title">职业</div>
      <div class="theme-list">
        <div class="theme-item" @click="handleDetail(item, careerList)" v-for="item in careerList" :key="item.id">
          <img class="audience-img" :src="item.imageUrl" alt="">
          <div class="audience-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div style="display: flex;">
      <div class="theme-bg" style="width: 532px;margin-right: 20px;">
        <div class="audience-title">性别</div>
        <div class="theme-list">
          <div class="theme-item" @click="handleDetail(item, genderList)" v-for="item in genderList" :key="item.id">
            <img class="audience-img" :src="item.imageUrl" alt="">
            <div class="audience-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="theme-bg" style="flex: 1;">
        <div class="audience-title">受教育程度</div>
        <div class="theme-list">
          <div class="theme-item" @click="handleDetail(item, educationList)" v-for="item in educationList" :key="item.id">
            <img class="audience-img" :src="item.imageUrl" alt="">
            <div class="audience-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;">
      <div class="theme-bg" style="width: 788px; margin-right: 20px;">
        <div class="audience-title">青年</div>
        <div class="theme-list">
          <div class="theme-item" @click="handleDetail(item, ageList)" v-for="item in ageList" :key="item.id">
            <img class="audience-img" :src="item.imageUrl" alt="">
            <div class="audience-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="theme-bg" style="flex: 1;">
        <div class="audience-title">地区分布</div>
        <div class="theme-list">
          <div class="theme-item" @click="handleDetail(item, areaList)" v-for="item in areaList" :key="item.id">
            <img class="audience-img" :src="item.imageUrl" alt="">
            <div class="audience-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
import { getAudienceAllList } from "@/api/library/audience"
export default {
  data () {
    return {
      allList: [],
      imageMaps: {
        '专业性技术人员': require('@/assets/images/audience/img20.png'),
        '女性': require('@/assets/images/audience/img12.png'),
        '男性': require('@/assets/images/audience/img13.png'),
        '初中及初中以下': require('@/assets/images/audience/img1.png'),
        '高中/职高及以下': require('@/assets/images/audience/img3.png'),
        '本科/大专': require('@/assets/images/audience/img2.png'),
        '硕士及以上': require('@/assets/images/audience/img4.png'),
        '青年': require('@/assets/images/audience/img5.png'),
        '中年': require('@/assets/images/audience/img6.png'),
        '老年': require('@/assets/images/audience/img7.png'),
        '台北地区': require('@/assets/images/audience/img8.png'),
        '台中地区': require('@/assets/images/audience/img9.png'),
        '台南地区（含台东）': require('@/assets/images/audience/img10.png'),
        '外岛': require('@/assets/images/audience/img11.png'),
        '无职业或失业者': require('@/assets/images/audience/img18.png'),
        '家管': require('@/assets/images/audience/img15.png'),
        '学生': require('@/assets/images/audience/img17.png'),
        '军人': require('@/assets/images/audience/img22.png'),
        '农林牧渔工作人员': require('@/assets/images/audience/img14.png'),
        '公务人员/政府工作人员': require('@/assets/images/audience/img16.png'),
        '私部门劳工': require('@/assets/images/audience/img21.png'),
        '私部门职员': require('@/assets/images/audience/img20.png'),
        '其他职业': require('@/assets/images/audience/img19.png'), 
        '专业性技术人员': require('@/assets/images/audience/img20.png'), 
      }
    };
  },
  created () {
    this.getList();
  },
  computed: {
    // 职业
    careerList: function () {
      return this.allList.filter(item => item.type === '职业' && Object.keys(item.audienceFactorScore).length)
    },
    // 性别 
    genderList: function () {
      return this.allList.filter(item => item.type === '性别' && Object.keys(item.audienceFactorScore).length)
    },
    // 受教育程度
    educationList: function () {
      return this.allList.filter(item => item.type === '受教育程度' && Object.keys(item.audienceFactorScore).length)
    },
    // 年龄
    ageList: function () {
      return this.allList.filter(item => item.type === '年龄' && Object.keys(item.audienceFactorScore).length)
    },
    // 地区分布
    areaList: function () {
      return this.allList.filter(item => item.type === '地区' && Object.keys(item.audienceFactorScore).length)
    }
  },
  methods: {
    /** 查询受众列表 */
    getList () {
      getAudienceAllList().then(response => {
        const result = response.data || [];
        result.forEach(item => {
          item.imageUrl = this.imageMaps[item.name]
        })
        this.allList = result
      })
    },
    /**
     * 受众详情
     */
    handleDetail (item, list) {
      // const others = list.filter(ele => ele.id !== item.id);
      // others.forEach(ele => {
      //   const selfScore = Object.values(item.audienceFactorScore)
      //   const otherScore = Object.values(ele.audienceFactorScore)
      //   ele.chartData = [
      //     {
      //       name: item.name,
      //       value: selfScore,
      //       itemStyle: {
      //         color: '#10E45E'
      //       }
      //     },
      //     {
      //       name: ele.name,
      //       value: otherScore,
      //       itemStyle: {
      //         color: '#0057FF'
      //       }
      //     }
      //   ]
      // })
      this.$router.push({
        path: '/library/audienceDetail',
        query: {
          id: item.id,
          type: item.type
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  margin: 32px;
  background: rgba($color: #fff, $alpha: 0.1);
  border-radius: 12px;
  padding: 20px;
  .title {
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
  }
}
.theme-bg {
  color: #fff;
  margin-top: 20px;
  border-radius: 8px;
  background: rgba($color: #fff, $alpha: 0.1);
}

.theme-list {
  display: flex;
  flex-wrap: wrap;
}

.audience-title {
  padding: 20px;
  font-size: 20px;
  font-weight: 500;
}

.theme-item {
  width: 236px;
  height: 120px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  margin-left: 20px;

  .audience-img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
</style>